<template>
  <div style="border:1px soild red">
    <p v-if="modelData">子组件传入的props：{{ modelData }}</p>
    <p>子组件自身的值：{{ value }}</p>
    <div>
      <el-select @change="change" v-model="value">
        <el-option label="三国演义" value="三国演义"></el-option>
        <el-option label="西游记" value="西游记"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  mixins: [],
  props: {
    modelData: {
      type: String,
      default: '',
    },
    childData: {
      type: String,
      default: '',
    },
  },
  // v-model方式需要此定义, 通过sync方式不需要此属性
  model: {
    prop: 'modelData',
    event: 'modelEvent',
  },
  data() {
    return {
      value: this.childData ?? this.modelData,
    }
  },
  computed: {},
  watch: {},
  methods: {
    change(data) {},
  },
  // 将子组件的值更新到父组件
  updated() {
    this.$emit('modelEvent', this.value) // 1 v-model 绑定
    this.$emit('update:childData', this.value) //2 .sync 可以同步父组件数据
  },
}
</script>
<style lang="scss" scoped></style>
